<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ship Sim</title>
    <style>
      #canvas {
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    <header>
    </header>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script type="text/javascript" src="World.js"></script>
    <script>
var obj={
  pro:{x:200,y:100,
    vx:0,vy:0
  },
  status:{
    showFlame:false
  },
  draw:function(context){
  context.save();
  context.fillStyle=' ';
  context.lineWidth = 1;
  context.strokeStyle = "#ffffff";
  context.beginPath();
  context.moveTo(10, 0);
  context.lineTo(-10, 10);
  context.lineTo(-5, 0);
  context.lineTo(-10, -10);
  context.lineTo(10, 0);
  context.stroke();
  if (this.status.showFlame) {
    context.beginPath();
    context.moveTo(-7.5, -5);
    context.lineTo(-15, 0);
    context.lineTo(-7.5, 5);
    context.stroke();
  }
  context.fill();
      context.restore();
  },
  logic:function(){
  }

};
var ball={
  pro:{
    x:10,y:20
  },
  draw:function(context){
  context.save();
  context.translate(this.pos.x,this.pos.y);
  context.rotate(this.rotation);
    context.fillStyle='lightblue';
    //console.log(context.fillStyle)
    context.fillRect(0,0,20,20);
    context.fill();
    context.restore();
  }

}
    window.onload = function () {
      var canvas = document.getElementById('canvas');
          _global.context = canvas.getContext('2d');
      var ship = new Sprite(obj),
          vr = 0,
          thrust = 0;
          var b=new Sprite(ball);
          b.addFouce(new Vector2(0,-0.01));


      window.addEventListener('keydown', function (event) {
        switch (event.keyCode) {
        case 37:      //left
          vr = -3;
          break;
        case 39:      //right
          vr = 3;
          break;
        case 38:      //up
          thrust = 0.05;
          //console.log(1);
          ship.status.showFlame = true;
          break;
        }
      }, false);

      window.addEventListener('keyup', function () {
        vr = 0;
        thrust = 0;
        ship.status.showFlame = false;
      }, false);

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        _global.context.clearRect(0, 0, canvas.width, canvas.height);
        ship.rotation += vr * Math.PI / 180;
        var angle = ship.rotation,
            ax = Math.cos(angle) * thrust,
            ay = Math.sin(angle) * thrust
            ship.addFouce({
              x:ax,y:ay
            },'shunjian')
        b.init();
        ship.init();
        b.moveTo(new Vector2(100,100),100,'easeIn');
        
      }());
    };
    </script>
  </body>
</html>
